<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form label-width="200px" v-if="dataInfo">
        <el-row>
          <el-form-item label="货品编号:">
            <span>{{ dataInfo.commonServerCode }}</span>
          </el-form-item>
          <el-form-item label="货品图片:">
            <div class="img-video">
              <template title="点击可预览" v-for="item in dataInfo.commonServerImages">
                <el-image fit="cover" v-if="item.type == 1" :src="item.url" alt="" :preview-src-list="images"></el-image>
                <video v-else="item.type==2" :src="item.url" controls>
                  <h2>我们很抱歉，您的浏览器<strong>不支持video标签</strong></h2>
                  <a href="https://www.google.cn/chrome/">点击这里下载浏览器</a>
                </video>
              </template>
            </div>
          </el-form-item>
          <el-form-item label="货品类别">
            <span v-if="dataInfo.serverType == 2">套餐产品</span>
            <span v-else-if="dataInfo.serverType == 3">租赁产品</span>
            <span v-else>普通产品</span>
          </el-form-item>
          <el-form-item label="货品分类:">
            <span>{{ dataInfo.serverClassifyName }}-{{ dataInfo.thirdClassifyName }}</span>
          </el-form-item>
          <el-form-item label="是否对接:">
            <span>{{ dataInfo.dockingFlag==2?'是':"否" }}</span>
          </el-form-item>
          <el-form-item label="对接类型:">
            <span>{{ $Filters.formatDockingType(dataInfo.dockingType) }}</span>
          </el-form-item>
          <el-form-item label="规格:">
            <span>{{ dataInfo.variantState == 1 ? '单品' : '多规格' }}</span>
          </el-form-item>
          <el-form-item label="多规格单项展示方式:">
            <span>{{ dataInfo.specDisplayType == 1 ? '页面展示' : '默认' }}</span>
          </el-form-item>
          <el-form-item label="商户确认方式:">
            <span>{{ $Filters.formatBusinessConfirmWay(dataInfo.businessConfirmWay) }}</span>
          </el-form-item>
          <el-form-item label="货品名称:">
            <span>{{ dataInfo.name }}</span>
          </el-form-item>
          <el-form-item label="货品简介:">
            <span>{{ dataInfo.introduce }}</span>
          </el-form-item>
          <el-form-item label="押金:" v-if="dataInfo.deposit">
            <span>{{ dataInfo.deposit }}</span>
          </el-form-item>
          <el-form-item label="起步价:" v-if="dataInfo.startFee">
            <span>{{ dataInfo.startFee }}</span>
          </el-form-item>
          <el-form-item label="上门/到店/远程/紧急通知">
            <div>
              <el-tag size="mini" effect="dark" v-if="dataInfo.visitFlag == 1">
                上门
              </el-tag>
              <el-tag size="mini" effect="dark" v-if="dataInfo.shopFlag == 1" type="success">
                到店
              </el-tag>
              <div></div>
              <el-tag size="mini" effect="dark" v-if="dataInfo.remoteFlag == 1" type="warning">
                远程
              </el-tag>
              <el-tag size="mini" effect="dark" v-if="dataInfo.fastFlag == 1" type="danger">
                急
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="商户:">
            <span>{{ dataInfo.businessName }}</span>
          </el-form-item>
          <el-form-item label="平台原价:">
            <span>{{ dataInfo.price }}</span>
          </el-form-item>
          <el-form-item label="平台售价:">
            <span>{{ dataInfo.salePrice }}</span>
          </el-form-item>
          <el-form-item label="商户原价:">
            <span>{{ dataInfo.marketPrice }}</span>
          </el-form-item>
          <el-form-item label="商户折扣比例:">
            <span>{{ dataInfo.discount }}%</span>
          </el-form-item>
          <el-form-item label="成本价:">
            <span>{{ dataInfo.costPrice }}</span>
          </el-form-item>
          <el-form-item label="包装费:">
            <span>{{ dataInfo.packageFee }}</span>
          </el-form-item>
          <el-form-item label="包装费计算方式:">
            <span >{{ dataInfo.packageFlag == 1 ? '独立包装费' : '合并包装费' }}</span>
          </el-form-item>
          <el-form-item label="是否需配送费:">
            <span>{{ dataInfo.deliveryFlag == 0 ? '否' : '是' }}</span>
          </el-form-item>
          <!--<el-form-item label="配送费:">
            <span>{{dataInfo.deliveryFee}}</span>
          </el-form-item>-->
          <!-- <el-form-item label="商户折扣比例:">
            <span>{{dataInfo.discount ? dataInfo.discount + "%" : ""}}</span>
          </el-form-item> -->
          <!--<el-form-item label="货品排序:">
            <span>{{dataInfo.sort == 999 ? "" : dataInfo.sort }}</span>
          </el-form-item>-->
          <el-form-item label="备注:">
            <span>{{ dataInfo.remark }}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>

        </el-row>
      </el-form>
      <div class="tit">
        <h2>货品描述</h2>
      </div>
      <RichEditor :readonly="true" :richText="dataInfo.describes"></RichEditor>
      <div class="tit">
        <h2>货品规格</h2>
      </div>
      <el-table border :data="commonServerVariants" style="width: max-content;">
        <el-table-column type="index" label="序号" align="center" width="80px">
        </el-table-column>
        <el-table-column label="服务主图" align="center" width="130px">
          <template slot-scope="scope">
            <div>
              <el-image style="width: 100px;height: 100px;" fit="cover" :src="scope.row.mainImg" alt="点击可放大查看"
                :preview-src-list="[scope.row.mainImg]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="服务图片" align="center" width="250px">
          <template slot-scope="scope">
            <div  v-if="scope.row.moreImg">
              <el-image v-for="(item,index) in scope.row.moreImg" :key="index" style="width: 100px;height: 100px;margin:0 5px 5px 0;" fit="cover" :src="item" alt="点击可放大查看"
                :preview-src-list="[scope.row.moreImg]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="specStr" label="规格" align="center" width="100px">
        </el-table-column>
        <el-table-column label="时长" align="center" v-if="dataInfo.serverType == 3" width="100px">
          <template slot-scope="scope">
            <div>
              {{ scope.row.rentTime }}
              <span v-if="scope.row.rentUnit == 1">分钟</span>
              <span v-else-if="scope.row.rentUnit == 2">小时</span>
              <span v-else>天</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否计时" align="center" width="100px" v-if="dataInfo.serverType == 3">
          <template slot-scope="scope">
            <div>
              {{ scope.row.rentFlag ? '是' : '否' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column  label="续费时长" align="center" width="100" v-if="dataInfo.serverType == 3">
          <template slot-scope="scope">
            <span v-if="!scope.row.rentFlag">{{ scope.row.renewTime+formatTimeUnit(scope.row.renewUnit) }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="renewPrice" label="续费价格" align="center" width="100" v-if="dataInfo.serverType == 3">
          <template slot-scope="scope">
            <span v-if="!scope.row.rentFlag">{{ scope.row.renewPrice}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="起步价" align="center" width="100" v-if="dataInfo.serverType == 3">
          <template slot-scope="scope">
            <span v-if="scope.row.rentFlag">{{ scope.row.deposit }}</span>
            <span v-else>无</span>
          </template>
          </el-table-column>
        <el-table-column prop="deposit" label="押金" align="center" width="100" v-if="dataInfo.serverType == 3">

        </el-table-column>
        <el-table-column prop="price" label="原价" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="salePrice" label="售价" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="costPrice" label="成本价" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="packageFee" label="包装费" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="packageDiscount" label="包装费折扣比例(%)" align="center" width="130px">
        </el-table-column>
        <el-table-column prop="introduce" label="简介" align="center" width="150px">
        </el-table-column>
        <el-table-column label="是否默认" align="center" width="100px">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.defaultFlag" effect="dark" size="small" type="danger">默认</el-tag>
              <el-tag v-if="!scope.row.defaultFlag" effect="dark" size="small" type="info">否</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import CommonServerApi from '@/api/goods/commonServer';
import RichEditor from "../../components/RichEditor.vue";
export default {
  data() {
    return {
      dataInfo: {},
      commonServerVariants: [],
      serverClassifyName: ""
    };
  },
  components:{
    RichEditor
  },
  computed: {
    images() {

      if (this.dataInfo.commonServerImages) {
        return this.dataInfo.commonServerImages.filter(item => item.type == 1).map(item => item.url)
      } else {
        return []
      }

    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      CommonServerApi.getCommonServerInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data
        let variants = res.data.commonServerVariants
        variants.forEach(a => {
          if (a.variantSpecs) {
            let specs = a.variantSpecs.map(b => {
              return b.specVal;
            })
            a.specStr = specs.join(",")
          }
          a.moreImg =a.moreImg?a.moreImg.split(","):""
        })
        this.commonServerVariants = variants
        //this.getBusinessList(res.data.businessId)
        //this.getServerClassifyList(res.data.serverClassifyId)
      })
    },
    formatTimeUnit(val) {
      if (val == 1) return "分钟"
      if (val == 2) return "小时"
      if (val == 3) return "天"
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/goods/commonServerManagement' })
    }
  },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss" scoped>
.img-video {
  width: 550px;
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 150px;
    height: 150px;
    vertical-align: bottom;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }

  video {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }
}
</style>
